<template>
  <Dialog title="设置" height="500px" width="550px" v-model:visual="visual">
    <div class="box">
      <div class="aside">
        <div class="menu" v-for="item of items"
             :class="{'choice':item.id===choiceId}"
             :key="item.id" @click.stop="clickMenu(item.id)">
          {{item.name}}
        </div>
      </div>
      <div class="content">
        <el-scrollbar>
          <keep-alive>
            <component v-bind:is="component"></component>
          </keep-alive>
        </el-scrollbar>
      </div>
    </div>
  </Dialog>
</template>

<script>
import {ref, shallowRef, watch} from "vue";
import Dialog from "@/components/Dialog";
import ModifyPassword from "@/components/ModifyPassword";
import DataImport from "@/components/DataImport";
import DataExport from "@/components/DataExport";
import DataSynchronize from "@/components/DataSynchronize";
import UsingHelp from "@/components/UsingHelp";
import SoftwareDescription from "@/components/SoftwareDescription";

export default {
  name: `Settings`,
  components:{Dialog},
  props:['visual'],
  setup(props,context){
    const items=ref([
      {id:1,name:'修改密码',to:shallowRef(ModifyPassword)},
      {id:2,name:'数据导入',to:shallowRef(DataImport)},
      {id:3,name:'数据导出',to:shallowRef(DataExport)},
      //{id:4,name:'数据同步',to:shallowRef(DataSynchronize)},
      {id:5,name:'使用帮助',to:shallowRef(UsingHelp)},
      {id:6,name:'软件说明',to:shallowRef(SoftwareDescription)}
    ]);
    const choiceId=ref(1);
    const component=shallowRef(ModifyPassword);

    const clickMenu=(id)=>{
      choiceId.value=id;
      component.value=items.value.find(item=>item.id===id).to
    }

    const visual=ref(false);

    watch(()=>props.visual,(newValue)=>{
      if(newValue!==visual.value)
        visual.value=newValue;
    },{immediate:true});

    watch(visual,(newValue)=>{
      if(newValue===false)
        context.emit('update:visual',false);
    },{immediate:true});

    return{
      items,
      component,
      clickMenu,
      choiceId,
      props,
      visual
    }
  }
}
</script>

<style scoped lang="less">
.box{
  height: calc(100% - 40px);
  width: 100%;
}
.dialog{
  position: absolute;
  left: 50%;
  top:50%;
  width: 300px;
  height:400px;
}
.menu{
  --height: 40px;
  height: var(--height);
  width: 100px;
  text-align: center;
  line-height: var(--height);
  //margin-left: 5px;
}
.menu:hover{
  background-color: #70a1ff;
  color: white;
}
.choice{
  background-color: #70a1ff;
  color: white;
}
.aside{
  background-color: #f1f2f6;
  float: left;
  width: 100px;
  height: 100%;
  //border-right: #ced6e0 1px solid;
  box-shadow: 5px 7px 10px 0 rgb(0 0 0 / 10%);
  cursor: pointer;
  user-select: none;
}
.content{
  float: left;
  height: calc(100% - 20px);
  width: calc(100% - 130px);
  padding: 10px 10px 10px 20px;
}
</style>
